
<template>
  <div>
  <div class="loginbg"></div>
  <HomeNav/>
  <div class="LoginMain animate__animated animate__fadeInDown" id="LoginMain">
    <transition enter-active-class="animate__animated animate__bounceInLeft"
                leave-active-class="animate__animated animate__fadeOut">
      <div id="register" class="form-container sign-up-container" v-if="flag">
        <div id="register1" >
          <form action="#">
            <h1>知遇账号注册</h1>
            <div> </div>
            <!-- <span>或使用您的手机号注册</span>
              <input type="text" placeholder="姓名">
              <input type="email" placeholder="邮箱">
              <input type="password" placeholder="密码">
            <button>注册</button>-->
            <ul>
              <li>
                <label>账&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号：</label>
                <input
                  type="text"
                  placeholder="用户名请输入4-20位字符"
                  class="username"
                  id="newuserName"
                  v-model="rnickname"
                  @blur="blurone"
                >
                <span class="error" id="checkName" v-if="blur1">用户名必须为4-20位</span>
                <span class="error" id="checkName" v-if="blur11">用户名已存在</span>
              </li>
              <li>
                <label>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：</label>
                <input type="password" placeholder="密码不少于6位" class="userpassword" id="newuserPwd" v-model="rpassword" @blur="blurtwo">
                <span class="error" v-if="blur2">密码不少于六位</span>
              </li>
              <li>
                <label>确认密码：</label>
                <input type="password" class="repassword" v-model="rpasswords" @blur="blurthree">
                <span class="error" v-if="blur3">两次输入的密码不相同</span>
              </li>
              <li>
                <label>电话号码：</label>
                <input type="tel" class="userphone" id="newuserTel" v-model="rtel" @blur="blurfour">
                <span class="error" v-if="blur4">请输入正确的电话号码</span>
              </li>
              <li class="d">
                <el-button type="primary" @click="register" round>注册</el-button>
              </li>
            </ul>
          </form>
        </div>
        <!-- <div class="regist2" >
          <svg
            t="1597892277201"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="3901"
            width="150"
            height="150"
          >
            <path
              d="M512 896C299.936 896 128 724.064 128 512S299.936 128 512 128s384 171.936 384 384-171.936 384-384 384m0-832C264.96 64 64 264.96 64 512s200.96 448 448 448 448-200.96 448-448S759.04 64 512 64"
              fill="#6a508c"
              p-id="3902"
            />
            <path
              d="M432 618.752l-121.376-121.376-45.248 45.248 166.624 166.624 326.624-326.624-45.248-45.248z"
              fill="#6a508c"
              p-id="3903"
            />
          </svg>
          <p>注册成功</p>
        </div> -->
      </div>
    </transition>

    <transition enter-active-class="animate__animated animate__bounceInRight"
                leave-active-class="animate__animated animate__fadeOut">
      <div id="login" class="form-container sign-in-container" v-if="flag2">
        <form action="#">
          <h1>账号登录</h1>
          <div> </div>
          <input type="text" placeholder="请输入手机号或用户名" name="username" id="username" v-model="snickname">
          <br />
          <input type="password" placeholder="请输入密码" id="userpassword" name="userpassword" v-model="spassword">
          <br />
          <el-button type="primary" @click="login" round>登录</el-button>
        </form>
      </div>
    </transition>

    <div class="overlay-container">
      <div class="overlay">
        <transition enter-active-class="animate__animated animate__bounceInRight"
                leave-active-class="animate__animated animate__fadeOut">
          <div class="overlay-panel overlay-left" v-if="flag">
            <div id="logo"></div>
            <h1>欢迎回到知遇</h1>
            <p>与我们保持联系，请登录您的个人信息</p>
            <button class="ghost" id="signIn" @click="flag=!flag,flag2=!flag2">登录</button>
          </div>
        </transition>

        <transition enter-active-class="animate__animated animate__bounceInLeft"
                leave-active-class="animate__animated animate__fadeOut">
          <div class="overlay-panel overlay-right" v-if="flag2">
            <div id="logo"></div>
            <h1>欢迎来到知遇</h1>
            <p>输入您的个人资料，与我们一起开始旅程</p>
            <button class="ghost" id="signUp" @click="flag2=!flag2,flag=!flag">注册</button>
          </div>
        </transition>
      </div>
    </div>
  </div>
  </div>
</template>
<script>
import HomeNav from '@/components/HomeNav.vue'
export default {
  name :'Login',
  data() {
    return {
       flag : false,
       flag2 : true,
       snickname:'',
       spassword:'',
       rnickname:'',
       rnicknames:'',
       rpassword:'',
       rpasswords:'',
       rtel:'',
       blur1:false,
       blur11:false,
       blur2:false,
       blur3:false,
       blur4:false,
      //  blur5:false,
    };
  },
  components:{
    HomeNav
  },
  methods:{
    login(){
      console.log('2')
      this.$axios.post('/api/users/login',{params:{username:this.snickname,userpassword:this.spassword}})
                .then(res=>{
                    console.log('res:',res)
                    if(res.data.data){
                        this.$store.state.ownUid=res.data.data[0].uid
                        this.$message({
                                        showClose: true,
                                        message: '登录成功',
                                        type: 'success'});
                        this.$router.push({name: 'UserMlDynamic'})
                    }
                    else{
                      this.$message.error('密码或用户名输入错误、请重新输入');
                    }
                })
                .catch(err=>{
                    console.log('err:',err)
                })
    },
    register(){
      // console.log('1')
        // console.log(this.blur1,this.blur11,this.blur2,this.blur3,this.blur4)
        if(this.blur1&&this.blur11&&this.blur2&&this.blur3&&this.blur4){
            this.$message.error('请输入正确后，再次注册');
        }
        else{
          this.$message({
                            showClose: true,
                            message: '注册成功',
                            type: 'success'});
          this.$axios.post('/api/users/register',{params:{username:this.rnickname,userpassword:this.rpassword,usertel:this.rtel}})
                .then(res=>{
                    console.log('res:',res)
                    if(res.data.data.msg=='ok'){
                      this.$message({
                                        showClose: true,
                                        message: '登录成功',
                                        type: 'success'});
                    }
                    else if(res.data.data.msg=='注册失败'){
                      this.$message.error('注册失败');
                    }
                })
                .catch(err=>{
                    console.log('err:',err)
                })
        }
    },
    blurone(){
      if (this.rnickname.length < 3 || this.rnickname.length > 20) {
        this.blur1=true
      }
      else{
        this.$axios.get('/api/users/checkName',{params:{username:this.rnickname}})
                .then(res=>{
                  console.log(res)
                    if(res.data.message=="用户名重复"){
                      this.blur11=true
                    }
                    else{
                      this.blur1=false
                      this.blur11=false
                    }
                })
                .catch(err=>{
                    console.log('err:',err)
                })
      }   
    },
    blurtwo(){
      if (this.rpassword.length < 6) {
        this.blur2=true
      }
      else{
        this.blur2=false
      } 
    },
    blurthree(){
      if (this.rpassword != this.rpasswords ) {
        this.blur3=true
      }
      else{
        this.blur3=false
      } 
    },
    blurfour(){
      var myreg = /^((1)+\d{10})$/;
      if (!myreg.test(this.rtel) ) {
        this.blur4=true
      }
      else{
        this.blur4=false
      } 
    },
  }
}
</script>
<style>
.loginbg{
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: -1;
  color: transparent;
  background-image: url(../assets/images/login-bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  transition: opacity 1s;
}
#app{
  box-sizing: border-box;
}
.LoginMain {
  border-radius: 10px;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
  overflow: hidden;
  max-width: 800px;
  min-height: 480px;
  opacity: 0.8;
}
.LoginMain h1 {
  color: #fff;
  margin-bottom: 10px;
}
#LoginMain label{
  color: #fff;
}
.LoginMain p {
  margin-top: 5px;
  margin-bottom: 25px;
  opacity: 0.9;
  font-size: 14px;
}
.LoginMain span {
  font-size: 13px;
  /* opacity: 0.7; */
}
.LoginMain ul {
  list-style: none;
}
.LoginMain li:last-child {
  margin-top: 10px;
}
.form-container form {
  background: rgba(43, 43, 44, 1);
  display: flex;
  flex-direction: column;
  padding: 0 50px;
  height: 480px;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.social-container {
  margin: 20px 0;
}

.social-container a {
  border: 1px solid #ddd;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 0 5px;
  height: 40px;
  width: 40px;
  color: #fff;
}


.form-container input {
  /* background: #eee; */
  border: none;
  padding: 12px 15px;
  margin: 8px 0;
  width: 100%;
}

.LoginMain button {
  border-radius: 20px;
  border: 1px solid rgb(89, 81, 165);
  background: rgb(35, 139, 243);
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  padding: 12px 45px;
  letter-spacing: 1px;
  text-transform: uppercase;
  /* transition: transform 80ms ease-in; */
  margin-top: 5px;
}

.LoginMain input[type="text"] {
  width: 200px;
  text-align: center;
  background: transparent;
  border: none;
  border-bottom: 1px solid #fff;
  font-family: "PLay", sans-serif;
  font-size: 13px;
  font-weight: 200px;
  padding: 10px 0;
  transition: border 0.5s;
  outline: none;
  color: #fff;
  font-weight: bold;
}

.LoginMain input[type="password"] {
  width: 200px;
  text-align: center;
  background: transparent;
  border: none;
  border-bottom: 1px solid #fff;
  font-family: "PLay", sans-serif;
  font-size: 13px;
  font-weight: bold;
  padding: 10px 0;
  transition: border 0.5s;
  outline: none;
  color: #fff;
}

.LoginMain input[type="tel"] {
  width: 200px;
  text-align: center;
  background: transparent;
  border: none;
  border-bottom: 1px solid #fff;
  font-family: "PLay", sans-serif;
  font-size: 13px;
  font-weight: 200px;
  padding: 10px 0;
  transition: border 0.5s;
  outline: none;
  color: #fff;
  font-weight: bold;
}

.LoginMain button:active {
  transform: scale(0.95);
}

.LoginMain button:focus {
  outline: none;
}

.LoginMain button.ghost {
  background: transparent;
  border-color: rgb(89, 81, 165);
  background-color:  rgb(35, 139, 243);
}

.form-container {
  position: absolute;
  top: 0;
  height: 100%;
  /* transition: all 0.6s ease-in-out; */
}

.sign-in-container {
  left: 0;
  width: 50%;
  z-index: 101;
}

.sign-up-container {
  right: 0;
  width: 50%;
  z-index: 101;
  /* opacity: 0; */
}

.overlay-container {
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  height: 100%;
  /* overflow: hidden; */
  /* transition: transform 0.6s ease-in-out; */
  z-index: 100;
}

.overlay {
  background: transparent;
  background: linear-gradient(to right, rgb(89, 81, 165), rgb(89, 81, 165)) no
    repeat 0 0 / cover;
  color: #fff;
  position: absolute;
  left: -100%;
  height: 100%;
  width: 200%;
  /* transform: translateX(0); */
  /* transition: transform 0.6s ease-in-out; */
}

.overlay-panel {
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 40px;
  height: 100%;
  width: 50%;
  text-align: center;
  opacity: 1;
  transform: translateX(-7%);
  /* transition: transform 0.6s ease-in-out; */
}
.overlay-right{
  left: 50%;
  transform: translateX(-7%);
}

* {
  margin: 0;
  padding: 0;
  /* box-sizing: border-box; */
  /* color: #fff; */
}

#LoginMain {
  position: absolute;
  /* top: 50%; */
  margin-top: 200PX;
  left: 50%;
  margin-left: -400px;
  right: 0;
}

#login {
  position: relative;
}
#login h1,
#register h1 {
  font-size: 30px;
}

/* html,
body {
  height: 100%;
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  font-family: sans-serif;
} */

#space {
  width: 100%;
}

.error {
  display: inline-block;
  width: 275px;
  height: 10px;
  line-height: 10px;
  font-size: 10px;
  color: rgb(228, 47, 34);
  text-align: center;
  /* display: none; */
  z-index: 10;
}

.regist2 {
  width: 420px;
  height: 200px;
  text-align: center;
  display: none;
}

#logo {
  width: 100px;
  height: 100px;
  background-image: url(../assets/images/logo.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0 auto;
  opacity: 0.9;
  margin-top: 5px;
  margin-bottom: 20px;
  border-radius: 20px;
  box-shadow: 2px 2px 3px rgb(60, 193, 255), -2px -2px 3px rgb(60, 193, 255);
  z-index: 10;
}

</style>